<template>
	<view class="home">
		<uv-navbar placeholder autoBack bgColor="#161714">
			<template v-slot:left>
				<view class="left_slot">
					<image src="@/static/images/logo.png"></image>
				</view>
			</template>
			<!-- <template v-slot:right>
				<view class="right_slot">
					<image src="@/static/images/1.png"></image>
					<input type="text" placeholder="搜索">
				</view>
			</template> -->
		</uv-navbar>
		<view class="content">
			<uv-swiper :list="swiper" keyName="img" height="150" imgMode="scaleToFill"></uv-swiper>
			<view class="notice" @click="router('/pages/home/notice_list')">
				<uv-notice-bar :text="notice_list" step bgColor="rgba(47, 47, 47,0.5)" color="#808080"></uv-notice-bar>
			</view>
			<view class="road">
				<view class="road_view" @click="router('/pages/home/tally')">
					<view class="key">{{$t('home.众筹通道')}}</view>
					<view class="look">
						<view class="text">去查看</view>
						<image src="@/static/images/2.png"></image>
					</view>
					<view class="cover">
						<image src="@/static/test/1.jpg"></image>
					</view>
				</view>
				<view class="road_box">
					<view class="road_item" @click="router('/pages/home/fusion')">
						<image src="@/static/images/3.png" class="icon"></image>
						<view class="road_cell">
							<view class="text">{{$t('home.合成通道')}}</view>
							<image src="@/static/images/2.png"></image>
						</view>
					</view>
					<view class="road_item">
						<image src="@/static/images/4.png" class="icon"></image>
						<view class="road_cell">
							<view class="text">{{$t('home.游戏通道')}}</view>
							<image src="@/static/images/2.png"></image>
						</view>
					</view>
				</view>
			</view>
			<!-- <scroll-view scroll-x class="scroll_box">
				<view class="item active">NFT发售专区</view>
				<view class="item">其他推荐</view>
			</scroll-view> -->
			<view class="list">
				<view class="item" v-for="(item,index) in list">
					<view class="item_head">
						<image src="@/static/images/5.png"></image>
						<text>{{item.start_date}}</text>
					</view>
					<view class="item_view">
						<image :src="item.product.cover" class="cover"></image>
						<view class="item_info">
							<view class="name">【{{item.product.name}}】</view>
							<view class="synopsis">{{item.product.synopsis}}</view>
							<view class="btn" @click="fiterRouter(item)">购买</view>
							<!-- <view class="btn" @click="router " v-if="index%2">购买</view>
							<view class="btn" @click="router('/pages/home/deta')" v-else>购买</view> -->

						</view>
					</view>
					<view class="btn_view">
						<view class="btn_cell">
							<view class="key">发售价格</view>
							<view class="value">${{item.product.price}}</view>
						</view>
						<view class="btn_cell">
							<view class="key">发售数量</view>
							<view class="value">{{item.stock}} 份</view>
						</view>
						<view class="btn_cell">
							<view class="key">限购</view>
							<view class="value">{{item.quota}} 份</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script setup>
	import {
		index
	} from "@/request/api";
	import {
		onShow
	} from "@dcloudio/uni-app";
	import {
		ref
	} from "vue";
	import useBase from "@/hooks/useBase.js";
	const {
		router
	} = useBase();

	const notice_list = ref([]);

	const swiper = ref([]);
	const list = ref([]);
	onShow(async () => {
		// let {
		// 	rotation,
		// 	purchase
		// } = await index();
		let res = await index();

		swiper.value = res.rotation;
		list.value = res.purchase;

		let arr = [];
		res.new.forEach(item => arr.push(item.title));
		notice_list.value = arr;
	});

	const fiterRouter = (item) => {
		let id = item.id;
		let type = item.product.type;

		let url = `/pages/home/deta?id=${id}`;
		if (type == 2) {
			url = `/pages/home/blind_box_deta?id=${id}`;
		}
		router(url);
	};
</script>

<style scoped lang="scss">
	.home {
		.left_slot {
			image {
				width: 286rpx;
				height: 56rpx;
			}
		}

		.right_slot {
			width: 200rpx;
			height: 66rpx;
			border-radius: 33rpx;
			padding: 0 10rpx 0 28rpx;
			box-sizing: border-box;
			background: #2F2F2F;
			display: flex;
			align-items: center;

			image {
				width: 36rpx;
				height: 36rpx;
			}

			input {
				flex: 1;
				color: #fff;
				font-size: 24rpx;
			}
		}

		.content {
			padding: 0 20rpx;
			box-sizing: border-box;

			.notice {
				margin: 20rpx 0 28rpx;
			}

			.road {
				margin-bottom: 30rpx;
				display: flex;
				justify-content: space-between;

				.road_view {
					width: 345rpx;
					height: 220rpx;
					border-radius: 20rpx;
					padding: 24rpx 25rpx;
					box-sizing: border-box;
					background: #2F2F2F;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.key {
						color: #FFFFFF;
						font-size: 30rpx;
						font-weight: bold;
					}

					.look {
						display: flex;
						align-items: center;

						.text {
							color: #808080;
							font-size: 20rpx;
						}

						image {
							width: 24rpx;
							height: 24rpx;
						}
					}

					.cover {
						display: flex;
						justify-content: flex-end;

						image {
							width: 188rpx;
							height: 80rpx;
						}
					}
				}

				.road_box {
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.road_item {
						width: 345rpx;
						height: 100rpx;
						border-radius: 20rpx;
						padding: 0 30rpx;
						box-sizing: border-box;
						background: #2F2F2F;
						display: flex;
						justify-content: space-between;
						align-items: center;

						.icon {
							width: 80rpx;
							height: 80rpx;
						}

						.road_cell {
							flex: 1;
							display: flex;
							justify-content: flex-end;

							.text {
								color: #FFFFFF;
								font-size: 28rpx;
								font-weight: bold;
								padding-right: 18rpx;
								box-sizing: border-box;
							}

							image {
								width: 24rpx;
								height: 24rpx;
							}
						}
					}
				}
			}

			.scroll_box {
				padding: 40rpx 0 30rpx;
				box-sizing: border-box;
				white-space: nowrap;

				.item {
					display: inline-block;
					height: 54rpx;
					line-height: 54rpx;
					color: #808080;
					font-size: 28rpx;
					border-radius: 10rpx;
					margin-right: 20rpx;
					padding: 0 34rpx;
					box-sizing: border-box;
					background: #202020;

					&.active {
						color: #111111;
						font-size: 28rpx;
						background: #DDF247;
					}
				}
			}

			.list {
				.item {
					border-radius: 20rpx;
					margin-bottom: 20rpx;
					padding: 20rpx 30rpx 20rpx;
					box-sizing: border-box;
					background: #2F2F2F;

					.item_head {
						display: flex;
						align-items: center;

						image {
							width: 36rpx;
							height: 36rpx;
						}

						text {
							color: #DDF247;
							font-size: 28rpx;
							padding-left: 12rpx;
							box-sizing: border-box;
						}
					}

					.item_view {
						padding: 30rpx 0 20rpx;
						box-sizing: border-box;

						display: flex;

						.cover {
							width: 200rpx;
							height: 200rpx;
						}

						.item_info {
							padding: 10rpx 0 14rpx 28rpx;
							box-sizing: border-box;
							display: flex;
							flex-direction: column;
							justify-content: space-between;

							.name {
								color: #FFFFFF;
								font-size: 28rpx;
								font-weight: 800;
							}

							.synopsis {
								color: #9198AB;
								font-size: 24rpx;
							}

							.btn {
								width: 240rpx;
								height: 68rpx;
								line-height: 68rpx;
								text-align: center;
								color: #111111;
								font-size: 28rpx;
								font-weight: bold;
								border-radius: 20rpx;
								background: #DDF247;
							}
						}
					}

					.btn_view {
						display: flex;
						justify-content: space-between;

						.btn_cell {
							width: 210rpx;
							height: 80rpx;
							border-radius: 10rpx;
							padding: 12rpx 0 0 18rpx;
							box-sizing: border-box;
							background: #42433F;

							.key {
								color: #999999;
								font-size: 20rpx;
								margin-bottom: 10rpx;
							}

							.value {
								color: #FFFFFF;
								font-size: 26rpx;
								font-family: DINPro;
							}
						}
					}
				}
			}
		}
	}
</style>